<template>
  <div class="task-monitoring-detail">
    <!-- 任务基本信息 -->
    <a-descriptions title="" :column="4" size="small">
      <a-descriptions-item label="任务名称">1000000000</a-descriptions-item>
      <a-descriptions-item label="工单号">XXX</a-descriptions-item>
      <a-descriptions-item label="任务策略">脱敏+水印</a-descriptions-item>
      <a-descriptions-item label="脱敏策略">南网总调数据脱敏策略</a-descriptions-item>
      <a-descriptions-item label="水印内容">用户+时间</a-descriptions-item>
      <a-descriptions-item label="水印策略">原地水印</a-descriptions-item>
      <a-descriptions-item label="源路径">-</a-descriptions-item>
      <a-descriptions-item label="目标资产">-</a-descriptions-item>
      <a-descriptions-item label="源资产">-</a-descriptions-item>
      <a-descriptions-item label="创建人">XX</a-descriptions-item>
      <a-descriptions-item label="创建时间">2025-03-26 08:29:20</a-descriptions-item>
      <a-descriptions-item label="开始时间">2025-03-26 08:29:20</a-descriptions-item>
      <a-descriptions-item label="供给方式">文件到文件</a-descriptions-item>
      <a-descriptions-item label="并发数">4</a-descriptions-item>
      <a-descriptions-item label="执行次数">5</a-descriptions-item>
      <a-descriptions-item label="表/文件数量（个）">3</a-descriptions-item>
      <a-descriptions-item label="目标路径">-</a-descriptions-item>
    </a-descriptions>

    <!-- 任务执行情况表格 -->
    <BeTable rowKey="id" :columns="columns" :pagination="false" :data-source="tableData" :scroll="{ x: 1200 }" :formSetting="{ fields: searchFields, maxVisible: 4 }">
      <template #toolbar>
        <h6 class="title">任务执行情况</h6>
      </template>
      <!-- 自定义单元格内容 -->
      <template #bodyCell="{ column, record }">
        <!-- 状态 -->
        <template v-if="column.key === 'status'">
          <span :class="record.status === 'success' ? 'status-success' : 'status-fail'">{{ record.status === 'success' ? '● 已完成' : '● 未完成' }}</span>
        </template>
        <!-- 结果 -->
        <template v-if="column.key === 'result'">
          <span :class="record.status === 'success' ? 'status-success' : 'status-fail'">{{ record.result }}</span>
        </template>
        <template v-if="column.key === 'action'">
          <div class="option-btns">
            <BeButton type="link" @click="showTaskReportModal = true">查看</BeButton>
          </div>
        </template>
      </template>
    </BeTable>

    <!-- 任务报告 -->
    <BeModal class="task-report-modal" title="任务报告" v-model:open="showTaskReportModal" width="800px" :showFooter="false">
      <div class="task-report-body">
        <div class="report-grid">
          <div class="report-card">
            <BeButton class="title-block" type="primary">任务阶段：数据识别</BeButton>
            <div class="progress-block">数据识别进度：100%</div>
            <div class="info-list">
              <div class="info-row" v-for="(item, index) in leftInfo" :key="index">
                <span class="info-label">{{ item.label }}：</span>
                <span class="info-value">{{ item.value }}</span>
              </div>
            </div>
          </div>

          <!-- 右：数据水印 -->
          <div class="report-card">
            <BeButton class="title-block" type="primary">任务阶段：数据水印</BeButton>
            <div class="progress-block">数据识别进度：100%</div>
            <div class="info-list">
              <div class="info-row" v-for="(item, index) in rightInfo" :key="index">
                <span class="info-label">{{ item.label }}：</span>
                <span class="info-value">{{ item.value }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </BeModal>
  </div>
</template>

<script lang="ts" setup>
import { Input, TableColumnsType } from 'ant-design-vue'

defineOptions({ name: 'TaskMonitoringList' })

// state
const showTaskReportModal = ref(false)
const leftInfo = [
  { label: '状态', value: '已完成' },
  { label: '表/文件数量（个）', value: '1' },
  { label: '已完成数量', value: '1' },
  { label: '成功数量', value: '1' },
  { label: '失败数量', value: '0' },
  { label: '成功率（%）', value: '100' },
  { label: '敏感表/文件数量', value: '1' },
  { label: '敏感字段数量', value: '5' },
  { label: '开始时间', value: '5' },
  { label: '结束时间', value: '5' },
  { label: '累计耗时', value: '30秒' }
]
const rightInfo = [
  { label: '状态', value: '已完成' },
  { label: '表/文件数量（个）', value: '1' },
  { label: '已完成数量', value: '1' },
  { label: '成功数量', value: '1' },
  { label: '失败数量', value: '0' },
  { label: '成功率（%）', value: '100' },
  { label: '共享量（M）', value: '0.1' },
  { label: '共享量（行）', value: '200' },
  { label: '平均速度（GB/小时）', value: '0.04' },
  { label: '开始时间', value: '2025-03-27 08:29:20' },
  { label: '结束时间', value: '2025-03-27 08:31:40' },
  { label: '累计耗时', value: '140秒' }
]
const searchFields = [
  {
    label: '文件名称',
    prop: 'fileName',
    component: Input,
    componentProps: { placeholder: '请输入' }
  },
  {
    label: '状态',
    prop: 'workCode',
    component: Input,
    componentProps: { placeholder: '请输入' }
  }
]
// 表格定义
const columns: TableColumnsType = [
  { title: '开始时间', dataIndex: 'startTime', align: 'center', width: 160 },
  { title: '结束时间', dataIndex: 'endTime', align: 'center', width: 160 },
  { title: '状态', key: 'status', align: 'center' },
  { title: '供给量（MB）', dataIndex: 'size', align: 'center' },
  { title: '供给量（行）', dataIndex: 'rows', align: 'center' },
  { title: '文件名称', dataIndex: 'filename', align: 'center' },
  { title: '用时', dataIndex: 'duration', align: 'center' },
  { title: '结果', key: 'result', align: 'center' },
  { title: '报告', key: 'action', align: 'center', fixed: 'right', width: 100 }
]
// 表格数据
const tableData = ref([
  {
    key: 1,
    startTime: '2025-03-26 08:29:20',
    endTime: '2025-03-26 08:34:20',
    status: 'success',
    size: '0.01',
    rows: 6,
    filename: 'a.rar',
    duration: '5mins',
    result: '已完成：执行成功'
  },
  {
    key: 2,
    startTime: '2025-03-27 08:29:20',
    endTime: '2025-03-27 08:35:20',
    status: 'success',
    size: '0.02',
    rows: 102,
    filename: 'b.zip',
    duration: '6mins',
    result: '已完成：执行成功'
  },
  {
    key: 3,
    startTime: '2025-03-28 08:29:20',
    endTime: '2025-03-28 08:36:20',
    status: 'success',
    size: '0.3',
    rows: 88,
    filename: 'c.xml',
    duration: '7mins',
    result: '已完成：执行成功'
  },
  {
    key: 4,
    startTime: '2025-03-29 08:29:20',
    endTime: '2025-03-29 08:34:20',
    status: 'success',
    size: '0.15',
    rows: 69,
    filename: 'e.txt',
    duration: '5mins',
    result: '已完成：执行成功'
  },
  {
    key: 5,
    startTime: '2025-03-29 08:29:20',
    endTime: '2025-03-29 08:34:20',
    status: 'fail',
    size: '0.44',
    rows: 1120,
    filename: 'f.docx',
    duration: '5mins',
    result: '未完成：执行失败'
  }
])
</script>
<style lang="scss">
.task-monitoring-detail {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 16px 0;
  background-color: var(--color-white);
  .ant-descriptions-view {
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }
  .be-table {
    flex: 1;
    height: auto;
    overflow: hidden;
    .status-success {
      color: var(--success);
    }
    .status-fail {
      color: var(--error);
    }
    .be-table__search {
      .be-form {
        padding-bottom: 0;
      }
    }
    .be-table__toolbar {
      .title {
        margin: 0;
        font-size: var(--font-size);
      }
    }
    .option-btns {
      display: flex;
      justify-content: center;
    }
  }
}
.task-report-modal {
  .task-report-body {
    .report-grid {
      display: flex;
      gap: 6px;
    }
    .report-card {
      flex: 1;
    }
    .title-block {
      margin: 0 auto;
    }
    .progress-block {
      padding: 5px;
      margin: 10px 0;
      font-size: 14px;
      background-color: #dff7fe;
    }
    .info-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .info-row {
      display: flex;
    }
    .info-label {
      width: 150px;
      font-weight: bold;
    }
    .info-value {
      flex: 1;
      text-align: left;
    }
  }
}
</style>
